### Full UI Customization

In addition to customizing form fields and theming, you can also build a custom UI for one or more of the authenticator steps using a combination of prebuilt widgets from the `amplify_authenticator` package, and widgets that you build yourself. This can be used for simple use cases, such as adding a logo to the sign in screen, as well as more complex use cases.

The Authenticator supports fully replacing the UI for any particular screen. Every screen has an associated `State` instance that can be used to implement custom UI.  Below is an example of how you can use `signInContent` to customize the Sign In screen, replacing the username and password text fields, as well as the submit button.

```kotlin
Authenticator(
    signInContent = { state ->
        val scope = rememberCoroutineScope()
        Column {
            val username = state.form.fields[FieldKey.Username]!!
            val password = state.form.fields[FieldKey.Password]!!

            // Replace default UI with completely custom UI
            TextField(
                placeholder = { Text("Username") },
                value = username.state.content,
                onValueChange = { userName.state.content = it }
            )
            TextField(
                placeholder = { Text("Password") },
                value = password.state.content,
                onValueChange = { password.state.content = it }
            )

            Button(onClick = { scope.launch { state.signIn() } }) {
                Text("Sign In")
            }

            // Or reuse Authenticator's composables
            SignInFooter(state)
        }
    }
) {
    // ...
}
```
